<template>
  <cj-popup v-model="isShow" position="bottom" round class="c-ph30 c-pt10 c-pb50" @opened="opened" :overlay-style="{background: 'transparent'}" :closeable="true">
    <div class="c-fs24 c-pv20 c-pt30">字号设置</div>
    <div class="tick-slider">
      <div class="tick-preview">
        <div class="preview">A</div>
        <div class="preview">A</div>
      </div>
      <div class="tick-slider-value-container">
        <div id="weightValue" class="tick-slider-value"></div>
      </div>
      <div class="tick-slider-background"></div>
      <div id="weightProgress" class="tick-slider-progress"></div>
      <div id="weightTicks" class="tick-slider-tick-container">
        <span class="tick-slider-tick" v-for="(item, index) in sliderTick" :key="index"></span>
      </div>
      <input
        id="weightSlider"
        class="tick-slider-input"
        type="range"
        min="12"
        max="24"
        step="2"
        :value="defaultFontSize"
        data-tick-step="2"
        data-tick-id="weightTicks"
        data-value-id="weightValue"
        data-progress-id="weightProgress"
        data-handle-size="18"
      />
    </div>
    <div class="c-fs24 c-pt20 c-mt20">背景设置</div>
    <div class="setting-theme c-clearfix">
      <div
        class="setting-theme-item"
        v-for="(item, index) in themeList"
        :key="index"
        @click="setTheme(index)"
      >
        <div
          class="preview"
          :style="{background: item.style.body.background}"
          :class="{'selected': index == defaultTheme}"
        ></div>
      </div>
    </div>
    <div class="c-fs24 c-pt20 c-mt20">翻页方式</div>
    <div class="c-flex-row c-justify-sb c-mt20 page-turning">
      <div v-for="(item, index) in pageTurningList" @click="choosePageTurn(item)" :key="index" class="item" :class="item.type == pageTurnType ? 'active':''">{{item.tit}}</div>
    </div>
  </cj-popup>
</template>
<script>
export default {
  name: 'EbooksReadSet',
  components: {},
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    pageTurnType:{
      type: Number,
      default:1
    },
    themeList: Array,
    defaultTheme: Number,
    fontSizeList: Array,
    defaultFontSize: Number,
  },
  data() {
    return {
      sliderTick: [12, 14, 16, 18, 20, 22, 24],
      pageTurningList:[{type:1, tit:"无"}, {type:2, tit:"简约"}, {type:4, tit:"覆盖"}],
      pageTurningType:1,
    };
  },
  watch: {
    isShow(val) {
      this.$emit('update:isShow', val);
    }
  },
  methods: {
    // 选择翻页模式
    choosePageTurn(data) {
      this.$emit("setPageTurnType", data.type)
    },
    opened() {
      this.initFontSize();
    },
    initFontSize() {
      const sliders = document.getElementsByClassName('tick-slider-input');
      for (let slider of sliders) {
        slider.oninput = this.onSliderInput;
        this.updateValue(slider, false);
        this.updateValuePosition(slider);
        // this.updateLabels(slider);
        this.updateProgress(slider);
        // this.setTicks(slider);
      }
    },
    onSliderInput(event) {
      this.updateValue(event.target, true);
      this.updateValuePosition(event.target);
      // this.updateLabels(event.target);
      this.updateProgress(event.target);
    },
    updateValue(slider, Boolean) {
      let value = document.getElementById(slider.dataset.valueId);
      value.innerHTML = '<div>' + slider.value + '</div>';
      // value.innerHTML = slider.value;
      this.$emit('setFontSize', slider.value, Boolean);
    },
    updateValuePosition(slider) {
      let value = document.getElementById(slider.dataset.valueId);
      const percent = this.getSliderPercent(slider);
      const sliderWidth = slider.getBoundingClientRect().width;
      const valueWidth = value.getBoundingClientRect().width;
      const handleSize = slider.dataset.handleSize;
      let left = percent * (sliderWidth - handleSize) + handleSize / 2 - valueWidth / 2;
      // let left = percent * sliderWidth - valueWidth / 2;
      left = Math.min(left, sliderWidth - valueWidth);
      left = slider.value === slider.min ? 0 : left;
      // left = (left / sliderWidth) * 100
      value.style.left = left + 'px';
    },
    updateProgress(slider) {
      let progress = document.getElementById(slider.dataset.progressId);
      const percent = this.getSliderPercent(slider);

      progress.style.width = percent * 100 + '%';
    },
    getSliderPercent(slider) {
      const range = slider.max - slider.min;
      const absValue = slider.value - slider.min;

      return absValue / range;
    },
    setTicks(slider) {
      let container = document.getElementById(slider.dataset.tickId);
      const spacing = parseFloat(slider.dataset.tickStep);
      const sliderRange = slider.max - slider.min;
      const tickCount = sliderRange / spacing + 1; // +1 to account for 0

      for (let ii = 0; ii < tickCount; ii++) {
        let tick = document.createElement('span');

        tick.className = 'tick-slider-tick';
        tick.style = 'width: 0.05rem;height:1.35rem;background:#fff;';
        container.appendChild(tick);
      }
    },
    onResize() {
      const sliders = document.getElementsByClassName('tick-slider-input');

      for (let slider of sliders) {
        this.updateValuePosition(slider);
      }
    },
    setTheme(index) {
      this.$emit('setTheme', index)
    },
  }
};
</script>
<style lang="scss">
// 新得
.tick-slider {
  position: relative;
  width: 100%;
  height: 1.35rem;
  .tick-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.35rem;
    padding: 0 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    .preview {
      color: #fff;
      font-size: 0.5rem;
      &:last-child {
        color: #666;
        font-size: 0.7rem;
      }
    }
  }
  .tick-slider-value-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.35rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 22;
    pointer-events: none;
    .tick-slider-value {
      position: absolute;
      top: 0;
      width: 1.35rem;
      height: 1.35rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      color: #248afd;
      font-size: 0.6rem;
      z-index: 2;
      pointer-events: none;
      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
      background: #fff;
      border-radius: 50%;
    }
  }
  .tick-slider-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.35rem;
    border-radius: 0.7rem;
    background: #f2f2f2;
    z-index: -1;
  }
  .tick-slider-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.35rem;
    border-radius: 0.7rem;
    background: #4893f8;
    z-index: -1;
  }
  .tick-slider-tick-container {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    z-index: -1;
    .tick-slider-tick {
      width: 0.05rem;
      height: 1.35rem;
      background: #fff;
      &:first-child {
        background: transparent;
      }
      &:last-child {
        background: transparent;
      }
    }
  }
  .tick-slider-input {
    width: 100%;
    height: 100%;
    background: transparent;
    outline: none;
  }
}
input[type='range']::-webkit-slider-thumb {
  position: relative;
  -webkit-appearance: none;
  height: 1.35rem;
  width: 1.35rem;
  background: transparent;
  border-radius: 50%; /*外观设置为圆形*/
  z-index: 2;
  background: transparent;
  border: 0;
}

.setting-theme {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #f6f6f6;
  .setting-theme-item {
    float: left;
    width: 3.5rem;
    // height: 3.3rem;
    &:nth-child(-n+4) {
      .preview {
        margin-top: 0.5rem;
      }
    }
    &:nth-child(-n+8):nth-child(n+5) {
      .preview {
        margin-top: .5rem;
      }
    }
    .preview {
      width: 1.8rem;
      height: 1.8rem;
      margin: 0 auto;
      border-radius: 50%;
      box-sizing: border-box;
      &.selected {
        border: 0.02rem solid #248AFD;
      }
    }
  }
}

.page-turning{
  .item{
    height: 2rem;
    border:.025rem solid #e5e5e5;
    border-radius: 0.5rem;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    font-size: .65rem;
    &.active{
      color: #248AFD;
      border-color: #248AFD;
    }
  }
}
</style>
